
<template>
    <el-dialog v-model="visible" title="预设渐变" width="30%" draggable>
        <el-divider content-position="left">线性渐变</el-divider>
        <div>
            <el-row>
                <el-col v-for="i in ItemList" :key=i.id :span="2.5" :offset="index > 0 ? 2 : 0">
                    <el-tooltip class="item" effect="light" :content=i.desc placement="top-start" :show-after=toolTipTime>
                        <el-card v-if="i.type == 'line'" :body-style="{ padding: '5px' }" @click="clickCard(i)">
                            <canvas :id=i.id width=40 height=40 z-index="3"></canvas>
                        </el-card>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
        <el-divider content-position="left">辐射渐变</el-divider>
        <div>
            <el-row>
                <el-col v-for="i in ItemList" :key=i.id :span="2.5" :offset="index > 0 ? 2 : 0">
                    <el-tooltip class="item" effect="light" :content=i.desc placement="top-start" :show-after=toolTipTime>
                        <el-card v-if="i.type == 'radial'" :body-style="{ padding: '5px' }" @click="clickCard(i)">
                            <canvas :id=i.id width=40 height=40 z-index="3"></canvas>
                        </el-card>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="onConfirm">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'

const initList = [
    { id: 'gradienID1', type: "line", desc: "左到右", st: { x: 0, y: 0 }, end: { x: 1, y: 0 }, stopArr: [{ portion: 0, color: '#ff0000' }, { portion: 1, color: '#ffffff' }] },
    { id: 'gradienID2', type: "line", desc: "左中右", st: { x: 0, y: 0 }, end: { x: 1, y: 0 }, stopArr: [{ portion: 0, color: '#ff0000' }, { portion: 0.5, color: '#ffffff' }, { portion: 1, color: '#00ff00' }] },
    { id: 'gradienID3', type: "line", desc: "左上到右下", st: { x: 0, y: 0 }, end: { x: 1, y: 1 }, stopArr: [{ portion: 0, color: '#0000ff' }, { portion: 0.5, color: '#ffffff' }, { portion: 1, color: '#ff00ff' }] },
    { id: 'gradienID4', type: "line", desc: "左下到右上", st: { x: 0, y: 1 }, end: { x: 1, y: 0 }, stopArr: [{ portion: 0, color: '#0000ff' }, { portion: 0.5, color: '#ffffff' }, { portion: 1, color: '#ff00ff' }] },
    { id: 'gradienID5', type: "radial", desc: "中心到右上", st: { x: 0, y: 0 }, end: { x: 1, y: 0 }, stopArr: [{ portion: 0, color: '#0000ff' }, { portion: 0.5, color: '#ffffff' }, { portion: 1, color: '#ff00ff' }] }
];

const visible = ref(false)
const ItemList = ref(initList)
const wid = ref(40)
const hgt = ref(40)
const notifyFunc = ref(null)

const clickCard = (item) => {
    console.log(item.id);
    var cmd = { propname: "preDefGradient", propval: item };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
    notifyFunc.value();
}

var paintGradient = function () {
    console.log("pre def gradient paint map");
    for (let i = 0; i < ItemList.value.length; i++) {
        let item = ItemList.value[i];
        let mapID = item.id;
        var map = document.getElementById(mapID);
        if (map) {
            var ctx = map.getContext("2d");
            let w = wid.value;
            let h = hgt.value;


            let grd = null;
            if (item.type == "line") {
                let stPt = item.st;
                let stx = stPt.x * w;
                let sty = stPt.y * h;
                let endPt = item.end;
                let stopx = endPt.x * w;
                let stopy = endPt.y * h;
                grd = ctx.createLinearGradient(stx, sty, stopx, stopy);
            }
            else {
                let halfW = w*0.5;
                let halfH = h*0.5;
                let stPt = item.st;
                let stx = halfW + stPt.x * halfW;
                let sty = halfH + stPt.y * halfH;
                let endPt = item.end;
                let stopx = halfW + endPt.x * halfW;
                let stopy = halfH + endPt.y * halfH;
                let dx = Math.abs(stx - stopx);
                let dy = Math.abs(sty - stopy);
                let radius = Math.sqrt(dx * dx + dy * dy);
                grd = ctx.createRadialGradient(stx, sty, 0, stx, sty, radius);
            }
            let stopArr = item.stopArr;
            let stopCount = stopArr.length;
            for (let n = 0; n < stopCount; n++) {
                let stopInfo = stopArr[n];
                grd.addColorStop(stopInfo.portion, stopInfo.color);
            }
            ctx.fillStyle = grd;
            ctx.fillRect(0, 0, w, h);
        }
    }
}


onMounted(() => {
    console.log("onMounted");
    paintGradient();
})

defineExpose({
    visible,
    onMounted,
    paintGradient,
    notifyFunc
});

</script>
  
<style>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
    border-radius: 4px;
    border-bottom: 20px;
}
</style>
  